<!--
 * @Description: 
 * @Date: 2023-12-20 14:19:12
 * @LastEditTime: 2024-04-28 10:57:47
-->
<template>
  <div
    :class="className"
    :style="{ height: height, width: width }"
    v-if="chartData"
  />
  <el-empty
    v-else
    :image="require('../../../../assets/images/null.png')"
    description="暂无数据"
  ></el-empty>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/shine"); // echarts theme
import resize from "../../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartData: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {
          val
            ? this.initChart(val)
            : (this.chart.dispose(), (this.chart = null));
        });
      },
    },
  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(data) {
      if (!this.chart) {
        this.chart = echarts.init(this.$el, "macarons");
      }

      this.chart && data && this.chart.setOption(data);
    },
  },
};
</script>
<style lang="scss" scoped>
.pie1 {
  width: 100%;
  height: 100%;
}
::v-deep .el-empty__description p {
  color: #3486da;
}
</style>
